<template>
	<view class="container">
		<view class="messageContent">
			<sysMessageCell :item='item' v-for='(item, index) in messageList' :key='index'></sysMessageCell>
		</view>
		<view style="padding-top: 300rpx;" v-if='showEmpty'>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		user
	} from '@/api/user.js'
	import {message} from '@/api/message.js'
	import sysMessageCell from "@/components/conversationCell/sysMessageCell.vue"
	export default{
		components:{sysMessageCell},
		data() {
			return {
				page: 1,
				size: 20,
				showEmpty: false,
				isLastPage: false,
				messageList: [],
				userInfo: {}
			}
		},
		onLoad(option) {
			this.conversationId = this.$Route.query.conversationId
			this.conversationType = this.$Route.query.conversationType
			uni.setNavigationBarTitle({
				title: this.$Route.query.nickname
			})
			this.getMessageList()
			this.readMessage()
		},
		onShow() {
			this.userInfo = this.$storage.getStorageDataSync(this.$store.state.userInfo)
		},
		onPullDownRefresh() {
			this.page = 1
			this.getMessageList()
		},
		onReachBottom() {
			console.log('上拉加载更多')
			if(this.isLastPage) {
				return
			}
			this.getMessageList()
		},
		methods:{
			getMessageList(){
				message.getMessageList({
					page: this.page,
					size: this.size,
					conversation: this.conversationId,
					messageType: this.conversationType 
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.code == 10000) {
						if(this.page == 1){
							this.messageList = []
						}
						var list = res.data.data.list
						this.messageList = [...this.messageList, ...list]
						this.showEmpty = this.messageList.length<1
						if (res.data.data.next) {
							this.page += 1
						} else {
							this.isLastPage = true
						}
					}
				})
			},
			readMessage(){
				message.readMessage({
					conversationId: this.conversationId
				}).then(res => {
					user.getUserInfo().then(res => {
						if (res.data.code == 10000) {
							this.$storage.setStorageDataSync(this.$keyConfig.userInfo, res.data.data)
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		margin-bottom: 40rpx;
	}
</style>
